<template>
	<view class="box-c">
		<view class="slide-logo">
			<swiper class="swiper" indicator-dots autoplay>
				<swiper-item>
					<image src="../../static/images/bg.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/class/class_top.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/bg.jpg" mode="widthFix"></image>
				</swiper-item>
			</swiper>

		</view>
		<!-- 招聘信息列表 -->
		<view class="hire-list">
			<scroll-view scroll-y :style="{height:hireHeight+'px'}">
				<view class="hire-list-info box-c" v-for="i in 7">
					<view class="box d-jc-sb hire-list-info-1">
						<text>餐厅志愿者</text>
						<text>2400积分/月</text>
					</view>
					<view class="box hire-list-info-2">
						<text>光华里互助餐厅</text>
					</view>
					<view class="box d-f-wrap hire-list-info-3">
						<view class="">月结</view>
						<view class="">月结</view>
						<view class="">月结</view>
						<view class="">月结</view>
						<view class="">月结</view>
					</view>
					<view class="box d-jc-sb hire-list-info-4">
						<view class="hire-list-info-4-left">
							<image src="../../static/images/class/list_3.png" mode="widthFix"></image>
							<text>王先生</text>
						</view>
						<view class="hire-list-info-4-right">
							<text>姑苏区 江州路</text>
						</view>
					</view>
					<view class="line"></view>
				</view>

			</scroll-view>

		</view>
		<view class="" style="height: 50rpx;">
			<hans-tabber :list="list" style="position:fixed;bottom:50rpx;width:100%;left:0;right:0;height: 140rpx;" @tabChange="tabChange"></hans-tabber>
		</view>
	</view>
</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	export default {
		components: {
			hansTabber
		},

		data() {
			return {
				hireHeight: 500,
				list: [{
						"text": "未录入",
						"iconPath": '../../static/enter.png',
						"selectedIconPath": '../../static/enter-select.png'
					},
					{
						"text": "作业互评",
						"iconPath": '../../static/correct.png',
						"selectedIconPath": '../../static/correct-select.png'
					},
					{
						"text": "成绩分析",
						"iconPath": '../../static/analyse.png',
						"selectedIconPath": '../../static/analyse-select.png'
					}
				],
				is_lhp:null

			}
		},
		onLoad() {
			let _this = this
			this.is_lhp = this.$is_bang
			console.log("是否为刘海屏", this.is_lhp)
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.hireHeight = res.windowHeight - uni.upx2px(300) //windoHeight为窗口高度，主要使用的是这个
				}
			})

		},
		methods: {
			tabChange(index) {
				console.log(index)
			}

		}
	}
</script>

<style>
	.line {
		height: 3rpx;
		width: 100%;
		background-color: #dfdfdf;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.hire-list-info-4-right {
		color: #9c9c9c;
	}

	.hire-list-info-4-left image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.hire-list-info-4-left text {
		font-size: 32rpx;

	}

	.hire-list-info-4 {
		margin-top: 20rpx;
	}

	.hire-list-info-3 view {
		border: solid #9d9d9d 1rpx;
		padding: 0 14rpx;
		color: #9d9d9d;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.hire-list-info-2 text {
		font-size: 24rpx;
		color: #818181;
		padding-bottom: 10rpx;
	}

	.hire-list-info-1 text:first-child {
		font-size: 36rpx;
		font-weight: 600;
	}

	.hire-list-info-1 text:last-child {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF5551;
		padding-bottom: 10rpx;
	}

	.hire-list-info {
		padding: 20rpx 30rpx;

	}

	.slide-logo image,
	.swiper {
		width: 100%;
		height: 200rpx;
	}
</style>
